<template>
    <div class="tool-box toolbox-list top-ui">
        <el-tooltip effect="dark" content="搜索" placement="right">
            <div @click="onToolboxItemClick(ToolboxList.toolSearch)">
                <Iconfont name="icon-toolSearch"></Iconfont>
            </div>
        </el-tooltip>
        <div>
            <Iconfont name="icon-instrument"></Iconfont>

            <div class="toolbox-instrument">
                <div class="toolbox-sub-item">
                    <div @click="onToolboxItemClick(ToolboxList.instrument_distance)">
                        <Iconfont name="icon-distance"></Iconfont>
                        <span class="item-text">距离测量</span>
                    </div>
                    <div @click="onToolboxItemClick(ToolboxList.instrument_standardSurface)">
                        <Iconfont name="icon-standardSurface"></Iconfont>
                        <span>面积测量</span>
                    </div>
                    <div @click="onToolboxItemClick(ToolboxList.instrument_splitScreen)">
                        <Iconfont name="icon-splitScreen"></Iconfont>
                        <span>分屏</span>
                    </div>
                    <div @click="onToolboxItemClick(ToolboxList.instrument_dingwei)">
                        <Iconfont name="icon-dingwei"></Iconfont>
                        <span>鹰眼</span>
                    </div>
                    <div @click="onToolboxItemClick(ToolboxList.instrument_ditudingwei)">
                        <Iconfont name="icon-ditudingwei"></Iconfont>
                        <span>定位</span>
                    </div>
                </div>
            </div>
        </div>
        <el-tooltip effect="dark" content="在线设计" placement="right">
            <div @click="onToolboxItemClick(ToolboxList.design)">
                <Iconfont name="icon-design"></Iconfont>
            </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="保存" placement="right">
            <div @click="onToolboxItemClick(ToolboxList.save)">
                <Iconfont name="icon-biaodian"></Iconfont>
            </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="分享" placement="right">
            <div @click="onToolboxItemClick(ToolboxList.share)">
                <Iconfont name="icon-biaomian"></Iconfont>
            </div>
        </el-tooltip>
    </div>
</template>

<script setup lang="ts">
import { ToolboxList } from './ToolBox'

defineProps({
    // 当前使用的工具
    currentTool: String,
})
const emits = defineEmits(['update:currentTool'])

/**
 * 工具项点击事件
 * @param {string} item 工具事项名称
 */
const onToolboxItemClick = (item: string) => {
    console.log('item', item)
    // 通过"update:currentTool"事件，可以与v-model配合监听数据改变
    emits('update:currentTool', item)
}
</script>

<style lang="scss" scoped>
.tool-box {
    right: $app-right-margin;
    top: pxToVw(20);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 44px;
    padding: 4px 0;
    border-radius: 4px;
    background: $app-bg-color;
    color: $app-font-color;
    opacity: $app-bg-color-opacity;
}

// 工具箱每一个项目
.toolbox-list {
    position: relative;

    & > div {
        width: 100%;
        height: 44px;
        transition: all 500ms;
        text-align: center;
        line-height: 44px;

        &:hover {
            border-radius: 4px;
            background: $app-bg-select-height-color;

            .toolbox-sub-item {
                display: flex;
            }
        }

        // 工具箱
        .toolbox-instrument {
            position: absolute;
            right: 52px;
            top: 44px;
            width: 122px;
            height: pxToVw(290);
        }
    }
}

// 二级子菜单
.toolbox-sub-item {
    display: none;
    flex-direction: column;
    width: 122px;
    border-radius: 4px;
    background: $app-bg-color;
    color: $app-font-color;
    opacity: $app-bg-color-opacity;

    // 每一个子菜单项
    & > div {
        padding-left: 18px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 44px;
        text-align: left;
        line-height: 44px;
        @include setTransition(650ms);

        span:first-child {
            width: pxToVw(30);
            padding-right: 9px;
            font-size: pxToVw(20);
        }

        .item-text {
            baseline-shift: baseline;
            font-size: 14px;
        }

        &:hover {
            background: #256FD9;
            display: flex;
        }
    }
}
</style>
